<template>
	<view class="orderList">
		<scroll-view  @scrolltolower='nextPage()' lower-threshold="500" class="" scroll-y :style="{height: orderHeight+'px'}">
		<view v-if="!isNull" class="courseList">
			<view v-for="itm in refundList" class="courseList-list"  @click="goDetail(itm.refundNo)">
				<view class="box d-jc-sb d-ai-c d-box">
					<view class="" v-if="itm.type==1">
						服务类型：陪伴门诊
					</view>
					<view class="" v-if="itm.type==2">
						服务类型：血透陪伴门诊
					</view>
					<view class="" v-if="itm.type==3">
						服务类型：代配药陪伴门诊
					</view>
					<view class="footer">
						<view class="status" style="color: #FF7E51;" v-if="itm.status==0">退款中</view>
						<view class="status" style="color: #FF7E51;" v-if="itm.status==1">退款成功</view>
						<view class="status" style="color: #999999 ;" v-if="itm.status===9">退款失败</view>
					</view>
				</view>
				<view class="d-box">
					就诊对象：{{itm.name}}
				</view>
				<view class="d-box mt-2">
					退款金额：{{itm.money}}
				</view>
				<view class="box mt-2 d-jc-end">
					<view class="orange ml-2">查看详情</view>
				</view>
			</view>
		</view>
		<view v-if="isNull" class="order_null">
			<image src="../../static/zanwudingdan@2x.png"></image>
			<text>暂时还没有退款订单~</text>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refundList:'',
				isNull:false,
				hasNextPage:false,
				pageNum:1,
				pageSize:10,
				orderHeight:400,
				order:[{
					'time':'2021-06-29 14:15',
					'user':'张三',
					'type':'血透门诊陪伴',
					'status':'1',   //0:待付款   1:已报名
				},{
					'time':'2021-06-29 14:15',
					'user':'陈松',
					'type':'门诊陪伴',
					'status':'0',   //0:待付款   1:已报名
				}]
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(0) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onShow() {
			this.getrefundlist()
		},
		methods: {
			goDetail(refundNo){
				uni.navigateTo({
					url:'refundInfo?refundNo='+refundNo
				})
			},
			nextPage() {
				// let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.refundlist({
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							for (var i = 0; i < res.data.dataMap.list.length; i++) {
								this.refundList.push(res.data.dataMap.list[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
			
						}
					})
				}
			
			},
			getrefundlist(){
				this.$api.refundlist({},this.pageNum, this.pageSize).then((res) => {
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.refundList = res.data.dataMap.list
						this.hasNextPage = res.data.dataMap.hasNextPage
						this.isNull = this.refundList.length < 1 ? true : false
					}
							
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.orderList{
		background-color: #F2F7FF;
	}
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		margin-top: 20rpx;
		color: #666666;
		font-size: 28rpx;
	}
	
	.order_null image {
		margin: 0 auto;
		margin-top: 160rpx;
		width: 261rpx;
		height: 256rpx;
	}
	.orderList{
		background-color: #F2F7FF;
	}
 .courseList{
	  .courseList-list{
		  width: 630rpx;
		  min-height: 180rpx;
		  margin: 0 auto;
		  background-color: white;
		  padding: 0 30rpx;
		  padding-bottom: 20rpx;
		  margin-top:10px;
		  .d-box{
			  font-size: 28rpx;
			  font-weight: 500;
			  color: #333333;
		  }
		  .grey{
			  width: 180rpx;
			  height: 68rpx;
			  background: #FFFFFF;
			  border: 2rpx solid #CCCCCC;
			  border-radius: 34rpx;
			  line-height: 68rpx;
			  text-align: center;
			  font-size: 28rpx;
			  font-weight: 500;
			  color: #666666;
		  }
		  .orange{
			  width: 180rpx;
			  height: 68rpx;
			  background: #FF8338;
			  border: 2rpx solid #FF8338;
			  border-radius: 34rpx;
			  font-size: 26rpx;
			  font-weight: 500;
			  color: #FFFFFF;
			  line-height: 68rpx;
			  text-align: center;
		  }
		   .footer{display: flex;justify-content: space-between;padding:10px;border-top:1px solid #EEEEEE;
		    align-items: center;
		    .status{font-weight: bold;}
		  }
	  }
	  
	  
  }
</style>
